<template>
	<view>
		<u-navbar :is-back="true" title="订单详情"></u-navbar>
		<view class="content">
			<view class="formBox">
				<view class="title">客户信息</view>
				<view class="">
					<view class="label">姓名：<span>{{detail.customerName}}</span></view>
					<view class="label">联系电话：<span>{{detail.customerPhone}}</span></view>
				</view>
			</view>
			
			<view class="formBox">
				<view class="title">订单信息</view>
				<view class="">
          <view v-if="bizType==1" class="label">订单编号：<span>{{ detail.washCarOrderNo }}</span></view>
          <view v-if="bizType==2" class="label">订单编号：<span>{{ detail.shoppingOrderNo }}</span></view>
          <view v-if="bizType==1" class="label">商品名称：<span>{{ detail.serviceName }}</span></view>
          <view v-if="bizType==2" class="label">商品名称：<span>{{ detail.goodsName }}</span></view>
          <view class="label">使用方式：<span>{{ detail.useTypeStr }}</span></view>
          <view class="label">购买数量：<span>{{ detail.number }}件</span></view>
          <view v-if="bizType==1" class="label">订单时间：<span>{{ detail.payTime }}</span></view>
          <view v-if="bizType==2" class="label">订单时间：<span>{{ detail.createOrderTime }}</span></view>
          <view class="label">支付状态：<span>{{ detail.payStatus == 1 ? '未支付' : '已支付' }}</span></view>
          <view class="label" v-if="detail.payStatus==2">支付方式：<span>{{ detail.payWay == 1 ? '微信' : '线下' }}</span></view>
          <view v-if="bizType==1" class="label red">商品金额：￥{{ detail.goodsAmount }}</view>
          <view v-if="bizType==1" class="label red">优惠：￥{{ detail.preferentialAmount }}</view>
          <view v-if="detail.useType!=2" class="label red">{{ bizType == 1 ? '实付金额' : '合计金额' }}：￥{{
              detail.amount
            }}
          </view>
          <view v-if="detail.useType==2" class="label red">实付积分：{{ detail.amount }}积分</view>
        </view>
      </view>

      <view v-if="bizType==1&&detail.orderStoreInfoVo" class="formBox">
        <view class="title">适用门店</view>
        <view class="pretive">
          <view class="label">{{ detail.orderStoreInfoVo.storeName }}</view>
          <view class="label">{{ detail.orderStoreInfoVo.address }}</view>
          <view class="btn f-c-sa">
            <u-icon color="#2979ff" label="联系电话" label-color="#2979ff" margin-left="16" name="phone-fill" size="32"
                    @click="tell(detail.orderStoreInfoVo.phone)"></u-icon>
            <u-icon name="weixin-fill" color="#2979ff" size="32" label="微信客服" label-color="#2979ff"
                    margin-left="16"></u-icon>

          </view>
          <view class="navBlueIcon">
            <image src="/static/navBlue_icon.png"
                   @click="goAddress(detail.orderStoreInfoVo.lon,detail.orderStoreInfoVo.lat)"/>
          </view>
        </view>
      </view>
      <view class="formBox" v-if="bizType==1">
        <view class="label">使用时间：<span>{{ detail.useTime }}</span></view>
        <view class="label">使用门店：<span>{{ detail.useStore }}</span></view>
      </view>

      <view v-if="bizType==2&&detail.orderStoreInfoVo" class="formBox">
        <view class="title">发货门店</view>
        <view>
          <view class="label">{{ detail.orderStoreInfoVo.storeName }}</view>
          <view class="label">{{ detail.orderStoreInfoVo.address }}</view>
          <view class="f-c-sb">
            <view class="f-c-fs">
              <view class="textCenter"><span class="mainText">{{ detail.orderStoreInfoVo.distance }}KM</span><br><span
                  class="secondText">距离</span></view>
              <view class="textCenter"><span
                  class="mainText">{{ detail.orderStoreInfoVo.counselorNum }}人</span><br><span
                  class="secondText">服务顾问</span></view>
            </view>
            <view class="icon f-c-fe">
              <u-icon color="#2979ff" name="phone-fill" size="32" @click="tell(detail.orderStoreInfoVo.phone)"></u-icon>
              <view>
                <image src="/static/navBlue_icon.png"
                       @click="goAddress(detail.orderStoreInfoVo.lon,detail.orderStoreInfoVo.lat)"/>
              </view>
							
						</view>
					</view>
				</view>
			</view>
      <view v-if="bizType==2&&detail.deliveryTime" class="formBox">
        <view class="label">发货时间：<span>{{ detail.deliveryTime }}</span></view>
        <view v-if="detail.courierNo" class="label">快递单号：<span>{{ detail.courierNo }}</span></view>
        <view class="label">快递名称：<span>{{ detail.courierName }}</span></view>
        <view class="label">
          <view>快递凭证</view>
          <view class='f-c-sb'>
            <image :src="baseURL+detail.deliveryVoucher" class="img"
                   @click="privewImg(imagePath+detail.deliveryVoucher)"></image>

          </view>
        </view>
      </view>
			
			<view class="formBox">
				<view class="title">评价信息</view>
				<view>
					<view class="label">评分：<span>{{detail.scoreVo.score}}</span></view>
					<view class="label">评价内容：<span>{{detail.scoreVo.comments}}</span></view>
					<view class="label">评价时间：<span>{{detail.scoreVo.commentsTime}}</span></view>
					<view class="label">
						<view>评价图片</view>
            <view class='f-c-fs' style="flex-wrap: wrap">
              <image v-for="(item,index) in img" :src="baseURL+item" class="img"
                     @click="privewImg(imagePath+item)"></image>

            </view>
					</view>
				</view>
			</view>
		</view>
	  
	</view>
</template>

<script>
import {scoreDetail} from '@/api/my'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
	  imagePath:this.$imagePath,
      scoreId: 0,
      bizType: 1,
      detail: {},
      img: [],
      baseURL: ''
    };
  },
  computed: {
			    ...mapGetters(["userInfo"]),
		
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    
			// JSON.parse() 由JSON字符串转换为JSON对象
			let objParam=JSON.parse(option.param);
			this.scoreId=objParam.id;
			this.bizType=objParam.bizType;
			this.baseURL=this.imagePath;
			this.init();
		},
		methods: {
      init() {
        this.getInfo();

      },
      privewImg(src) {
        uni.previewImage({
          current: src, // 当前显示图片的http链接
          urls: [src] // 需要预览的图片http链接列表
        });
      },
      tell(phone) {
        uni.makePhoneCall({
          phoneNumber: phone //仅为示例
        });
      },
      goAddress(longitude, latitude) {
        uni.openLocation({
          latitude: Number(latitude),
          longitude: Number(longitude),
          success: function () {
            console.log('success');
          }
        });
      },
      getInfo() {
        var data = {
          scoreId: this.scoreId,
          bizType: this.bizType,
          lon: this.$get('location')[0],
          lat: this.$get('location')[1]
        }
        scoreDetail(data).then(res => {

          this.detail = res.data
					this.img=this.detail.scoreVo.scoreUrl.split(',');
					console.log(this.img);
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #ededed;
		padding-top:20rpx;
		padding-bottom:20rpx;
		.status{
			width: 660rpx;
			margin: 0 auto;
			color: #177fff;
			line-height: 48px;
			font-size: 32rpx;
			font-weight: bold;
		}
		.formBox{
			width: 660rpx;
			padding:15rpx 24rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				line-height: 65rpx;
				border-bottom: none;
			}
			.title:before{
				position: relative;
				top:4rpx;
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 25rpx;
				background: #177fff;
				border-radius: 4px;
				margin-right: 10rpx;
			}
			.pretive{
				position: relative;
				.navBlueIcon{
					position: absolute;
					right:26rpx;
					top:36rpx;
					width: 35rpx;
					height: 35rpx;
					margin-left: 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.btn{
				view{
					margin:15rpx 0;
					padding:20rpx 30rpx;
					line-height: 64rpx;
					border: 2px solid #3699ff;
					border-radius: 40px;
					color: #177fff;
				}
			}
			.label{
				font-size: 28rpx;
				color: #999;
				line-height: 60rpx;
				span{
					color:#333;
				}
			}
			.red{
				color: #ff6738;
			}
			.textCenter{
				text-align: center;
				margin-right: 30rpx;
			}
			.mainText{
				font-size: 28rpx;
				color: #333333;
			}
			.secondText{
				font-size: 24rpx;
				color: #999999;
			}
			.icon{
				view{
					width: 35rpx;
					height: 35rpx;
					margin-left: 30rpx;
					image{
						width: 100%;
            height: 100%;
          }
        }
      }
    }

    .formBox:last-child {
      margin-bottom: 0;
    }

  }

  .img {
    width: 170rpx;
    height: 200rpx;
    margin: 10rpx;
  }
    
</style>
